<extend name="./public/frame.html"/>
<block name="content">
    <style type="text/css">
        .layui-form-label{width: 12%;}
        .layui-input-block{margin-left: 12%;}
        .layui-form-pane1{margin-top: 20px;}

        .layui-form-checkbox {
            margin-top: 5px;
        }

    </style>
    <form class="layui-form layui-form-pane1" method="post" enctype="multipart/form-data" id="formId">
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>归属车队：</label>
            <div class="layui-inline">
                <select name="fleet_id" lay-filter="fleet_id" id="fleet_id" class="layui-input">
                    <option value="">归属车队</option>
                    <volist name="fleet_list" id="vo">
                        <option value="{$vo['id']}" style="text-align:center">{$vo.name}</option>
                    </volist>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>归属路线：</label>
            <div id="route_list" class="layui-input-block fa" style="margin-left: 10px;">
                <!--<input type="checkbox" data-type="all" title="全部" lay-verify="required|route">-->
                    <!--<volist name="fleet_list" id="v">-->
                        <!--<input type="checkbox" name="fleet[]" title="{$v.name}" value="{$v.id}" class="item_child">-->
                    <!--</volist>-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>车型名称：</label>
            <div class="layui-input-block">
                <input type="text" name="model_name" lay-verify="required" placeholder="车型名称"
                       autocomplete="off" class="layui-input" style="width: 500px;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>车型图片：</label>
            <div class="layui-input-block">
                <a href="" target="_blank" id="img_car"><img  id="pic_url" layer-src="" src="" width="100px;" height="100px;" style="display: none;"></a>
                <input name="car_img" id="pic_urlk" type="hidden" value="" lay-verify="required">
                <!--<input name="file_thumb" id="file_thumb" type="hidden" value="">-->
                <button type="button" class="layui-btn uploads"  id="upload-car"><i class="layui-icon">&#xe67c;</i>上传图片</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>包车价格：</label>
            <div class="layui-input-block">
                <input type="text" name="price" placeholder="请输入包车价格(单位：元)"
                       autocomplete="off" class="layui-input" lay-verify="required|number" style="width: 500px;" onkeyup="clearNoNum(this)">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>核载人数：</label>
            <div class="layui-input-block">
                <input type="text" name="max_passenger_num" placeholder="请输入核载乘客人数"
                       autocomplete="off" class="layui-input" lay-verify="required|number" style="width: 500px;" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 180px;margin-top: 50px;">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="add">立即添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <div class="fadeBg"></div>
    <div class="fadeCont" style="width: 20%;left: 40%;top: 30%">
        <div class="fadeBox upload">
            <img src="__WEB__/images/uploading.gif" style="width: 30%;height: auto">
            <p style="font-size: 12px;margin-bottom: 3px;">处理中，请稍等……</p>
        </div>
    </div>
    <script>
        layui.use(['form','laydate','upload'], function () {
            var   form = layui.form
                , laydate = layui.laydate
                ,upload = layui.upload;
            //要放在form.on外面，千万不能放在提交步骤中，否则会不触发


            lay('.date').each(function(){
                laydate.render({
                    elem: this
                    ,type: 'date'
                    ,trigger: 'click'
                });
            });

            layer.photos({
                photos: '.layer-photos-demo'
                ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });

            form.on('select(fleet_id)',function(data){
                var fleet_id = data.value;
                var url = "{:url('getRouteList')}";
                $.post(url,{'fleet_id':fleet_id},function(res){
                    console.log(res);
                    $("#route_list").html('');
                    $("#route_list").html(res);
                    form.render('checkbox');
                });
            });

            //营业执照
            upload.render({
                elem: '#upload-car'//这个就等同于点击
                ,url: '/admin/Upload/upload'
                ,done:  function(res){ //上传后的回调
                    if(res.status == 1){
                        $("#pic_url").css('display','');
                        $("#pic_url").attr('src',res.data.file);
                        $("#pic_url").attr('layer-src',res.data.file_thumb); //小图
                        $("#img_car").attr('href',res.data.file);

                        $("#pic_urlk").attr('value',res.data.file);
//                        $("#file_thumb").attr('value',res.data.file_thumb);
                        layer.msg('上传成功',{icon: 1});
                    }else{
                        layer.msg(res.msg);
                    }
                }
                ,error: function(e){
                    console.log(e)
                    //layer.msg('上传失败');

                }
            });
            //监听提交
            form.verify({
                route: function (value) {
                    var child = $('.fa').find('.item_child');
                    var i = 0;
                    child.each(function (index, item) {
                        if ($(this).attr('checked')) {
                            i = i + parseInt($(this).val());
                        }
                    });
                    if (i === 0) {
                        return '未选择归属路线';
                    }
                }
            });


            form.on('checkbox', function (data) {
                var type = $(this).data('type');
                if (type === 'all') {
                    var child = $('.fa').find('.item_child');
                    child.each(function (index, item) {
                        item.checked = data.elem.checked;
                    });
                    form.render('checkbox');
                }
            });

            form.on('submit(add)', function(data){
                var formStr = $("#formId").serialize();
                //序列化中文时之所以乱码是因为.serialize()调用了encodeURLComponent方法将数据编码了
                //原因：.serialize()自动调用了encodeURIComponent方法将数据编码了
                //解决方法：调用decodeURIComponent(XXX,true);将数据解码
                var params = decodeURIComponent(formStr,true); //关键点
                $.ajax({
                    url:'{:url("/admin/CharterCar/add")}',
                    async:true,
                    dataType:'json',
                    type:'POST',
                    data: params,
                    success:function(res){
                        console.log(res.code);
                        if(res.code===1){
                            layer.alert(res.msg, {icon: 6},function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                window.parent.location.reload()
                            });
                        }else{
                            layer.msg(res.msg,{icon: 5});
                        }
                    }
                });
                return false;
            });
        });

        //控制只能输入小数点后2位
        function clearNoNum(obj) {
            obj.value = obj.value.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
            obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
            obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
            if (obj.value.indexOf(".") < 0 && obj.value != "") {    //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
                obj.value = parseFloat(obj.value);
            }
        }

    </script>
</block>
